<template>
  <div class="navListChang_wrap">
    <div class="top_cent flex" v-if="showIcon">
      <div class="text">推荐</div>
      <div class="text">居家生活</div>
      <div class="text">服饰鞋包</div>
      <div class="text">美食酒</div>
    </div>
    <div class="botm_wrap flex_c" v-else>
      <div class="title">
        全部频道
      </div>
      <div class="rigth_wrap_list flex">
        <div class="text_item">推荐</div>
        <div class="text_item">居家生活</div>
        <div class="text_item">服饰鞋包</div>
        <div class="text_item">美食酒水</div>
        <div class="text_item">个护清洁</div>
        <div class="text_item">母婴亲子</div>
        <div class="text_item">运动旅行</div>
        <div class="text_item">数码家电</div>
        <div class="text_item">严选全球</div>
      </div>
    </div>
    <!-- 点击切换 -->
    <div class="icon_wrap tarm" @click="showIcon = !showIcon">
      <el-icon v-if="showIcon" class="el-icon--right" size="small">
        <arrow-down  />
        
      </el-icon>
      <el-icon v-else class="el-icon--right" size="small">
        <arrow-up  />
        
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ArrowDown ,ArrowUp} from '@element-plus/icons-vue'
const showIcon = ref(true)


</script>

<style scoped lang="less">
.navListChang_wrap {

  width: 375px;
  margin-top: 44px;
  margin-bottom: 10px;
  position: relative;
  .icon_wrap{
    position: absolute;
    right: 10px;
    top: -12px;
   
  }
  .tarm{
      transform: translateX(90);
    }
  // 上半部分样式
  .top_cent{
    width: 350px;
    justify-content: space-around;
    font-size: 14px;
    
  }
  // 下半部分
  .botm_wrap{

    width: 375px;
    padding: 0 10px;
    .title{
      font-size: 14px;
      margin: 5px  0;
    }
    .rigth_wrap_list{
      justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;
      padding-right: 20px;
      box-sizing: border-box;
      .text_item{
        width: 75px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        margin:  6px 0;
        text-align: center;
        background-color: #fafafa;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>